$(function () {

    //获取哈希值
    let index = location.hash.split("=")[1];
    let storage = window.localStorage
    function init() {

        load()
            .done(function (res) {
                render(res.datails)
                console.log(res.datails);
                addCar()
                changeCar()
            })

    }

    function load() {

        let options = {
            url: "../../static/libs/json/prototype.json",
            // dataType : "json"
        }

        return $.ajax(options)

    }

    function render(res) {
        // console.log(res);
        $(".main_con").html(`
        <div class="data">
        <div class="big">
        <div class="focus"></div>
        <div class="small_img"><img src="${res[index].img_big}" alt=""></div>
    </div>
    <ul>
        <li>
            <span><</span>
        </li>
        <li><img src="${res[index].img_samll_01}" alt=""></li>
        <li><img src="${res[index].img_samll_02}" alt=""></li>
        <li><img src="${res[index].img_samll_03}" alt=""></li>
        <li><img src="${res[index].img_samll_04}" alt=""></li>
        <li><span>></span></li>
    </ul>
</div>

<div class="big_img">
    <img src="${res[index].img_big}" alt="">
</div>

    <div class="msg">
        <h1>${res[index].name}</h1>
        <div class="quan">
            <img src="../../static/img/big/msg_quan.png" alt="">
        </div>
        <div class="miao">
            <img src="../../static/img/big/msg_miao.png" alt="">
        </div>

        <div class="choose">
            <span>颜色</span>
            <p>${res[index].color}</p>
        </div>
        <div class="choose">
            <span>内存</span>
            <p>${res[index].ram}</p>
        </div>

        <div class="number">

            <p>数量</p>
            <div class="math">
                <span>-</span>
                <input type="text" placeholder="1">
                <span>+</span>
                <span>仅限购10件</span>
            </div>

        </div>
    </div>

    <div class="add_car">

        <p>${res[index].price}</p>
        <div class="kind">
            <p>已选：<span>${res[index].color}</span>|<span>${res[index].ram}</span>|<span>一件</span></p>
        </div>
        <p data-id="${res[index].goods_id}"><span class="car">加入购物车</span></p>
        <img src="../../static/img/big/add_car.png" alt="">

    </div>

        `)


        //放大镜
        $(function () {

            let $big = $(".big")
            let $focus = $(".focus")
            let $big_img = $(".big_img")

            function init_big() {

                $big
                    .mouseover(function () { $focus.show(), $big_img.show() })
                    .mouseout(function () { $focus.hide(), $big_img.hide() })
                    .mousemove(function (e = event) {

                        let scrollTop = $("html,body").scrollTop()

                        let left = e.clientX - $focus.width() / 2
                        let top = e.clientY - $focus.height()
                        // console.log(left , top);

                        if (left < 0) {
                            left = 0;
                        }
                        if (top < 0) {
                            top = 0;
                        }
                        if (left > 300) {
                            left = 300;
                        }
                        if (top > 320) {
                            top = 320;
                        }

                        $focus.css({
                            left: left, top: top
                        })

                        let _left = (left / 300) * 250
                        let _top = (top / 320) * 250
                        $(".big_img img").css({ left: -_left, top: -_top })

                    })



            }

            init_big()

        })
    }
    function addCar() {
        $(".car").click(function () {
            console.log("111");
            let user_id = getCookie("userid");
            let goods_id = $(this).parent().attr("data-id");
            let token = getCookie("token");
            console.log(goods_id);
            var options = {
                url: `http://127.0.0.1:8888/cart/add?id=${user_id}&goodsId=${goods_id}`,
                type: "post",
                data: {
                    id: user_id,
                    goodsId: goods_id
                },
                headers: {
                    authorization: token
                }
            }

            $.ajax(options)
                .done(function (data) {
                    console.log(data);
                    handlerAjax(data);
                });


            function handlerAjax(data) {
                switch (data.code) {
                    case 1:
                        alert(data.message);
                        break;
                    case 401:
                        alert("抱歉您还没有登录，请登录后再去加入购物车");
                        location.href = "./login.html#goods";
                        break;
                }
            }

        })

    }
    function changeCar() {



        $(".cart").html(`<a href="./car.html">购物车(${storage.length})&nbsp;&nbsp;&nbsp;|<\a>`)




    }
    init()

})